  <!DOCTYPE html>
  <html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
    <style type="text/css">
      .container {
        height: 100%;
        width: 80%;
      }
      .myNav{
        margin-bottom: 40px;
      }
      .scenic{
        color: white;
      }
      .card .card-action a:not(.btn):not(.btn-large):not(.btn-floating) {
        color: #8bc34a;
      }
      .card .card-action a:hover:not(.btn):not(.btn-large):not(.btn-floating) {
        color:#aed581;
      }
    </style>
  </head>

  <body onload="load()" class = " light-green lighten-4">
    <script type="text/javascript" src="js/jquery-2.2.0.min.js"></script>
    <script type="text/javascript" src="js/materialize.min.js"></script>

    <nav class="myNav">
      <div class="nav-wrapper   light-green darken-4">
        <a href="" class="brand-logo"> 武侯祠管理系统</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
          <li><a href="">景点</a></li>
          <li><a href="">美食</a></li>
          <li><a href="">厕所</a></li>
          <li><a href="">新闻</a></li>
          <li><a href="">广播</a></li>
          <li><a href="">反馈</a></li>
          <li><a href="">设置</a></li>
        </ul>
      </div>
    </nav>



    <div class = "container">
    <div class="row">

      <div class="col s6" id="spotOut">
        <div class="card"  id="spot">
          <div class = "card-image">
            <img src="img/5.jpg">
            <h3 ><span class="card-title"><a href="#" class="scenic">景点</a></span></h3>
          </div>
        </div>
      </div>    

      <div class="col s3 "  id = "news">
        <div class="card ">
          <div class="card-action flow-text">
            <h3 class ="center-align "><a href="#" >新闻</a></h3>
          </div>
        </div>
      </div>

      <div class="col s3 ">
        <div class="card ">
          <div class="card-action flow-text">
            <h3 class ="center-align "><a href="#">厕所</a></h3>
          </div>
        </div>
      </div>

      <div class="col s6">
        <div class="card "  id="food">
          <div class = "card-image">
            <img src="img/food.jpg">
            <h3><span class="card-title"><a href="#" class="scenic" >美食</a></span></h3>
          </div>          
        </div>
      </div>

                        
      <div class="col s3 " id = "feedback" >
        <div class="card" >
          <div class="card-action flow-text">
            <h3 class ="center-align"><a href="#" >反馈</a></h3>
          </div>
        </div>
      </div>    

      <div class="col s3 " id ="broadcast">
        <div class="card ">
          <div class="card-action flow-text">
            <h3 class ="center-align"><a href="#" >广播</a></h3>
          </div>
        </div>
      </div>


    </div>
    </div>

    

  </body>
  </html>


<script type="text/javascript">
  function load(){
  
   
    var myMarginTop = 0-($("#news").height());
    console.log(myMarginTop);
    $("#feedback").css({"margin-top":myMarginTop});
    $("#broadcast").css("margin-top",myMarginTop);

  }


</script>